<!-- 加工运单二维码 -->
<template>
    <div class='generate-code'>
        <el-image style="width: 100%; height: 100%" :src="canvasUrl" :fit="'cover'" :preview-src-list="[canvasUrl]">
            <div slot="error" class="image-slot">
                暂无图片
            </div>
        </el-image>
        <el-button type="primary" icon="el-icon-download" size="mini" @click="downloadImage" class="download-btn"
            v-show="show"></el-button>
    </div>
</template>

<script>
import axios from 'axios';
import { getHeader } from '@/utils/tool';
import QRCode from 'qrcode';
export default {
    //import引入的组件需要注入到对象中才能使用
    props: {
        url: {
            type: String,
            default: "",
        },
        id: {
            type: String | Number,
            default: ""
        }
    },
    components: {},
    data() {
        //这里存放数据
        return {
            canvas: null,
            canvasUrl: "",
            show: false,//控制下载按钮是否显示
        };
    },
    //监听属性 类似于data概念
    computed: {},
    //监控data中的数据变化
    watch: {},
    //方法集合
    methods: {
        createUrl() {
            let canvas = document.createElement('canvas');
            // this.canvas = canvas;
            canvas.width = 600;
            canvas.height = 600;

            var ctx = canvas.getContext('2d');
            ctx.strokeStyle = '#f5f5f5';
            ctx.beginPath();
            ctx.roundRect(0, 0, 600, 600, 20);
            ctx.stroke();
            ctx.fillStyle = '#f5f5f5';
            ctx.fill();

            let image = new Image();
            image.onload = () => {
                ctx.drawImage(image, 380, 10, 181, 120);
            }
            image.src = require('@/assets/images/huoche@3x.png');
            axios({
                url: `https://api.zhgylgl.com/api/driver/getBillCode?id=${this.id}`,
                methods: 'get',
                headers: getHeader()
            }).then(res => {
                if (res.data.code == 200) {
                    ctx.font = 'bold 22px Arial';  // 设置字体样式
                    ctx.fillStyle = '#000';  // 设置填充颜色
                    ctx.fillText(res.data.data.company_name, 30, 40);
                    ctx.font = 'bold 18px Helvetica, Arial, sans-serif';  // 设置字体样式
                    ctx.fillText('装:' + res.data.data.ship_address, 30, 80);
                    ctx.fillText('卸:' + res.data.data.to_address, 30, 110);
                    ctx.fillText(res.data.data.goods + " | " + res.data.data.chechang + " | " + res.data.data.weight + res.data.data.danwei, 30, 140);
                    ctx.fillText('扫描上方二维码,承接该运单', 200, 500);
                    ctx.fillText(`运单编号:${res.data.data.id}`, 250, 540);
                    var div = document.createElement('div');
                    QRCode.toDataURL(res.data.data.qrcode_content, { type: 'image/png' }, (err, url) => {
                        if (err) {
                            throw err;
                        }
                        // 创建一个新的 Image 对象
                        const img = new Image();

                        // 当图片加载完成后
                        img.onload = () => {

                            // 在 canvas 上绘制图片
                            ctx.drawImage(img, 150, 150, 300, 300);

                            // 将 canvas 转换为 blob
                            canvas.toBlob((blob) => {
                                // 创建一个下载链接
                                // const link = document.createElement('a');
                                this.canvasUrl = URL.createObjectURL(blob);
                                // link.href = URL.createObjectURL(blob);
                                // link.download = 'qrcode.jpg';
                                // link.click();
                            }, 'image/png');
                        };

                        // 设置图片的来源
                        img.src = url;
                    });
                } else {
                    this.$message.error(res.data.msg);
                }
            })

        },
        showBtn() {
            this.show = true;
        },
        hideBtn() {
            this.show = false;
        },
        downloadImage() {
            // 创建一个下载链接
            const link = document.createElement('a');
            link.href = this.canvasUrl;
            link.download = 'qrcode.jpg';
            link.click();
        },
        destoryEventListener() {
            document.querySelector('.generate-code').removeEventListener('mouseenter', this.showBtn)
            document.querySelector('.generate-code').removeEventListener('mouseleave', this.hideBtn);
        },
    },
    //生命周期 - 创建完成（可以访问当前this实例）
    created() {

    },
    //生命周期 - 挂载完成（可以访问DOM元素）
    mounted() {
        setTimeout(() => {
            this.createUrl();
        }, 0);

        document.querySelector('.generate-code').addEventListener('mouseenter', this.showBtn)
        document.querySelector('.generate-code').addEventListener('mouseleave', this.hideBtn)
    },
    beforeCreate() { }, //生命周期 - 创建之前
    beforeMount() { }, //生命周期 - 挂载之前
    beforeUpdate() { }, //生命周期 - 更新之前
    updated() { }, //生命周期 - 更新之后
    beforeDestroy() {

    }, //生命周期 - 销毁之前
    destroyed() {

    }, //生命周期 - 销毁完成
    activated() { }, //如果页面有keep-alive缓存功能，这个函数会触发
}
</script>
<style lang='scss' scoped>
//@import url(); 引入公共css类
.generate-code {
    position: relative;
    width: 100%;
    height: 100%;


    .download-btn {
        position: absolute;
        right: 10px;
        top: 10px;


    }

    ::v-deep .el-button--mini.download-btn {
        padding: 6px;
    }

}
</style>